<template>
	<div id="app">
		<div class="top">
			<div class="top-left">
        <img src="../assets/image/blm.png"/>
			</div>
			<div class="top-center">
				<Menu mode="horizontal" :theme="theme1" active-name="1">
					<MenuItem name="1">
					首页
					</MenuItem>
					<MenuItem name="2">
					班级
					</MenuItem>
					<MenuItem name="3">
					考试
					</MenuItem>
					<MenuItem name="4">
					课程
					</MenuItem>
					<MenuItem name="5">
					题库
					</MenuItem>
					<MenuItem name="6">
					上课
					</MenuItem>
					<MenuItem name="7">
					进度计划模板
					</MenuItem>
					<MenuItem name="8">
					进度计划管理
					</MenuItem>
				</Menu>
			</div>
			<div class="top-right">
				<div class="top-right-img">
          <img src="../assets/image/kn.png"/>
				</div>
				<div class="top-right-content">
					<Dropdown style="margin-left: 20px">
						<Button type="primary">
							皮祉鉴
							<Icon type="ios-arrow-down"></Icon>
						</Button>
						<DropdownMenu slot="list">
							<DropdownItem>退出登录</DropdownItem>
						</DropdownMenu>
					</Dropdown>
				</div>
			</div>
		</div>
		<div class="center-top">
			<div class="center-top-left">
        <img src="../assets/image/kn.png"/>
				<div class="text">皮祉鉴</div>
				<div class="biaoqian">
					暂未设置个人标签
				</div>
				<div>
					<button>去上课</button>
				</div>
				<div class="center-top-left-content">
					<div class="div1">修改密码</div>
					<div class="div2">我的消息</div>
				</div>
			</div>
			<div class="center-top-right">
				<div class="center-top-right-text">
					今日授课
				</div>
				<div class="center-top-right-content">
					<div class="center-top-right-content-div1">
						2019秋_信息技术_集训_061
					</div>
					<div class="center-top-right-content-div2">
						大前端兼全栈2019定制班
					</div>
					<div class="center-top-right-content-div3">
						<span class="bt">开始上课</span>
					</div>
					<div class="triangle"></div>
				</div>
			</div>
		</div>
		<div class="center-bottom">
			<div class="center-bottom-left">
				<Menu :theme="theme1" active-name="1">
					<MenuItem name="1">
					<Icon type="ios-home-outline" />
					个人中心
					</MenuItem>
					<MenuItem name="2">
					<Icon type="ios-book" />
					添加考试
					</MenuItem>
					<MenuItem name="3">
					<Icon type="ios-bookmarks" />
					添加课程
					</MenuItem>
					<MenuItem name="4">
					<Icon type="md-albums" />
					添加模板
					</MenuItem>
					<MenuItem name="5">
					<Icon type="md-paper-plane" />
					添加计划
					</MenuItem>
					<MenuItem name="6">
					<Icon type="ios-card" />
					学习报告
					</MenuItem>
				</Menu>
			</div>
			<div class="center-bottom-right">
				<div class="center-bottom-right-div1">
					<div class="center-top-right-text">
						明日备课
					</div>
					<div class="center-bottom-right-div1-content">
						<div class="data">2020-03-07</div>
						<div class="classmessage">暂无课程信息</div>
						<div class="icon">
							<Icon type="ios-keypad-outline" />
						</div>
					</div>
				</div>
				<div class="center-bottom-right-div2">
					<div class="center-bottom-right-div2-text">
						班级管理
					</div>
				</div>
				<div class="center-bottom-right-div3">
					<div class="center-bottom-right-div3-top">
						<div class="center-bottom-right-div3-top-left">
							<div class="span">1</div>
							<div class="text">
								<span class="span1">春_信息技术_集训_069</span><br>
								<span class="span2">2020考研培训课程</span>
							</div>
						</div>
						<div class="center-bottom-right-div3-top-right">
							<ul class="ul">
								<li>
									<p>
										<Icon type="ios-book-outline" />
									</p>
									<span>去上课</span>
								</li>
								<li>
									<p>
										<Icon type="md-done-all" />
									</p>
									<span>班级态势表</span>
								</li>
								<li>
									<p>
										<Icon type="ios-reverse-camera-outline" />
									</p>
									<span>班级相册</span>
								</li>
							</ul>
						</div>
					</div>
					<div class="center-bottom-right-div3-bottom">
					<Progress :percent="100" />
					</div>
				</div>
				<div class="center-bottom-right-div3">
					<div class="center-bottom-right-div3-top">
						<div class="center-bottom-right-div3-top-left">
							<div class="span">1</div>
							<div class="text">
								<span class="span1">春_信息技术_集训_069</span><br>
								<span class="span2">17级</span>
							</div>
						</div>
						<div class="center-bottom-right-div3-top-right">
							<ul class="ul">
								<li>
									<p>
										<Icon type="ios-book-outline" />
									</p>
									<span>去上课</span>
								</li>
								<li>
									<p>
										<Icon type="md-done-all" />
									</p>
									<span>班级态势表</span>
								</li>
								<li>
									<p>
										<Icon type="ios-reverse-camera-outline" />
									</p>
									<span>班级相册</span>
								</li>
							</ul>
						</div>
					</div>
					<div class="center-bottom-right-div3-bottom">
					<Progress :percent="90" status="active" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				theme1: 'primary'
			}
		},
		components: {

    },
		mounted() {

    },
		methods: {

    }
	}
</script>

<style scoped="scoped">
  @import url("../assets/css/home.css");
</style>
